// import { reactive, ref, defineComponent } from "vue";
// import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
// import { useInfoStore } from "@/store/index";

import { setToken } from "@/utils/auth";
import "@/views/login/login.scss";
// const Test = useInfoStore();
type Props = {
  title: string;
};
export default defineComponent({
  setup(props) {
    const ruleFormRef = ref<any>(null);
    const route = useRouter();
    // useRouter() 用的是 inject  必须在setup下使用 只能先存起来
    // Test.getRoute(route);
    // 类型推导 可用可不用
    type fromObj = {
      accountNumber: string;
      passWord: string;
    };
    const ruleForm = reactive<fromObj>({
      // 账号 密码
      accountNumber: "",
      passWord: "",
    });
    // 验证规则
    const rules = reactive<FormRules>({
      accountNumber: [
        { required: true, message: "请输入账号", trigger: "blur" },
        { min: 5, max: 16, message: "账号长度在5到16", trigger: "blur" },
      ],
      passWord: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, max: 16, message: "密码长度在6到16", trigger: "blur" },
      ],
    });
    const { proxy }: any = getCurrentInstance();
    const submitForm = async (formEl: any) => {
      if (!formEl) return;
      await formEl.value.validate((valid: any, fields: any) => {
        if (valid) {
          // const { accountNumber: userName,passWord } = ruleForm;
          // const formData = new FormData();
          // formData.append("userName", userName);
          // formData.append("passWord", passWord);
          proxy.$api
            .login({
              userName: ruleForm.accountNumber,
              passWord: ruleForm.passWord,
            })
            .then((res: any) => {
              let { token } = res.data;
              setToken(token);
              route.push("/");
            });
        } else {
          console.log("error submit!", fields);
        }
      });
    };

    const resetForm = (formEl: any) => {
      if (!formEl) return;
      ruleForm.accountNumber = "";
      ruleForm.passWord = "";
    };
    return () => {
      return (
        <div class="login">
          <div class="submit">
            <div class="title">后台管理系统</div>
            <el-form
              ref={ruleFormRef}
              model={ruleForm}
              rules={rules}
              label-width="60px"
              className="demo-ruleForm"
              size="default"
              status-icon
            >
              <el-form-item label="账号" prop="accountNumber">
                <el-input v-model={ruleForm.accountNumber} />
              </el-form-item>
              <el-form-item label="密码" prop="passWord">
                <el-input v-model={ruleForm.passWord} type="password" />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  onClick={() => submitForm(ruleFormRef)}
                >
                  登录
                </el-button>
                <el-button onClick={() => resetForm(ruleFormRef)}>
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      );
    };
  },
});
